<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ext JS - Side Tabs</title>
    <!-- Ext includes -->
    <script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
    <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>

    <!-- Shared example includes -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
    <script type="text/javascript" src="../shared/examples.js"></script>

    <!-- Example includes -->
    <link rel="stylesheet" type="text/css" href="side-tabs.css" />

    <!-- GC -->

    <script type="text/javascript" src="side-tabs.js"></script>

</head>
<body>
    <h1>Side Tabs</h1>
    <p>Note that the JS and CSS are not minified so they are readable. See <a href="side-tabs.js">side-tabs.js</a> for the tab creation code.</p>

    <p>
        This example demonstrates side-aligned tabs in Ext JS.  Tab Panels can be configured
        with a tabPosition of "right" to rotate the tab bar clockwise, or "left" to rotate
        the tab bar counter-clockwise.
    </p>

    <div id="left-tabs" class="tab-cont">
        <h2>Left-Aligned Tabs</h2>
    </div>
    
    <div id="right-tabs" class="tab-cont">
        <h2>Right-Aligned Tabs</h2>
    </div>
    <div class="x-clear"></div>
    <div id="left-scroll-tabs" class="tab-cont">
        <h2>Left-Aligned Tabs With Scrolling</h2> 
    </div>
    <div id="right-scroll-tabs" class="tab-cont">
        <h2>Right-Aligned Tabs With Scrolling</h2>
    </div>

</body>
</html>
